<template>
  <div class="button flex-four">
    <!-- 时间条 -->
    <div class="silder">
      <el-slider v-model="playTime" :max="playMusicTime"></el-slider>
    </div>
    <!-- 左边 -->
    <div class="buttom-left flex">
      <!-- 获取vuex  state中的数据
      如果是默认值
      有歌曲数据 -->
      <img src="@/assets/logo.png" alt="" v-if="playUrl == 1">
      <img :src="musicDetail.al.picUrl" alt="" v-else>
      <div class="left-center" v-if="playUrl == 1">
        <div>歌手-歌名</div>
        <div>00:00/00:00</div>
      </div>

      <div class="left-center" v-else>
          <div>{{musicDetail.ar[0].name}}--{{musicDetail.name}}</div>
          <div>{{playTime | fromTimeOne}}/{{musicDetail.m.br | fromTime}}</div>
      </div>

    </div>
    <!-- center -->
    <div class="button-center ">
      <div class="center-left flex-four">
        <i class="el-icon-caret-left"></i>
        <!-- 点击  让音频暂停 -->
       <div v-if="showPlay">
          <i class="el-icon-video-play" v-if="playUrl == 1"></i>
        <i class="el-icon-video-pause" v-else @click="playPause"></i>
       </div>
          <i class="el-icon-video-play" v-else @click="play"></i>
        <i class="el-icon-caret-right"></i>
      </div>
      <!-- 播放器 -->
      <audio :src="playUrl"  autoplay ref='audio' ></audio>
    </div>
    <!-- right -->
    <div class="button-right flex-four">
      
      <div class="right-top">
        <i class="el-icon-mic"></i>
        <div class="silder-box">
          <el-slider vertical 
          height="60px" v-model="volume" @change="selectVolume"></el-slider>
        </div>
      </div>
       <i class="el-icon-mic" style="margin:0 30px"></i>
        <i class="el-icon-mic"></i>
    </div>
  </div>
</template>

<script>
import {timeFormat,fromTimeOne} from '@/common/common'
import {mapState} from 'vuex'
export default {
   data(){
     return{
      value2:0 ,  //当前歌曲播放时间条显示
       showPlay:true,
       playTime:0,
       playMusicTime:100,
       volume:100,
     }
   },
   computed:{
     ...mapState(['playUrl','musicDetail'])
   },
   filters:{
     fromTime:function(val){
       let time = timeFormat(val)
       return  time
     },
     fromTimeOne:function(val){
       let time = fromTimeOne(val)
       return time
     }
   },
   mounted(){
     this.selider()
   },
   methods:{
     //暂停播放
     playPause(){
       //获取  audio  DOM元素
      //  console.log(this.$refs.audio)  
       let audio = this.$refs.audio//操作虚拟DOM
       //暂停
       audio.pause()
       this.showPlay = false
     },
     //重新播放
     play(){
         let audio = this.$refs.audio
       //播放
       audio.play()
       this.showPlay = true
     },
    // 时间条
    selider(){
      let audio = this.$refs.audio
      //
      audio.addEventListener('timeupdate',()=>{
        this.playTime = audio.currentTime
        this.playMusicTime = audio.duration
      })
    },
    //控制音量
    selectVolume(){
      console.log(this.volume)
        let audio = this.$refs.audio;//
        audio.volume = this.volume
    }
   }
}
</script>

<style scoped lang='less'>
.button{
    height: 65px;
    background: rgb(179, 226, 245);
    position: relative;
    .silder{
      position: absolute;
      top: -16px;
      height: 10px;
      width: 100%;
      cursor: pointer;
    }
    .buttom-left{
      cursor: pointer;
        img{
          height: 50px;
          width: 50px;
          margin: 0 15px;
        }
        .left-center{
          padding-top: 4px;
        }
    }
    .button-center{
         .center-left{
           color: rgb(71, 134, 185);
           font-size: 45px;
           cursor: pointer;
         }
    }
    .button-right{
      margin-right: 20px;
      .right-top{
        margin-right: 50px;
        position: relative;
        .silder-box{
          position: absolute;
          width: 20px;
          top: -50px;
          left: 10px;
          opacity: 0;
        }
      }
      .right-top:hover .silder-box{
        opacity: 1;
      }
    }
}
</style>